<template>
  <div class="platform-rating-container">
    <!-- {{ ratingPlatforms }} -->
    <div class="platform-rating-grid">
      <div
        v-for="platform in ratingPlatforms"
        :key="platform.id"
        class="platform-rating-card"
        :class="{ 'platform-selected': isPlatformSelected(platform.platform) }"
        @click="togglePlatform(platform.platform)"
      >
        <div class="platform-card-content">
          <div class="platform-card-header">
            <div class="platform-logo-wrapper">
              <img
                :src="getPlatformLogo(platform.platform)"
                :alt="platform.platform + ' logo'"
              />
            </div>
            <div class="platform-info-wrapper">
              <div class="platform-name-text">{{ platform.platform }}</div>
              <div class="platform-rating-wrapper">
                <span class="platform-rating-value">{{ platform.score }} </span>
                <i class="el-icon-star-on rating-star-icon"></i>
                <span class="platform-review-count"
                  >({{ formatNumber(platform.reviews) }} Reviews)</span
                >
              </div>
            </div>
          </div>

          <div class="platform-stats-container">
            <div class="response-rate-wrapper">
              <div class="response-rate-label">Response rate</div>
              <div class="response-rate-value">
                {{ platform.responseRate }}%
              </div>
              <!-- <div class="response-rate-trend">
                <img src="@/assets/updown.png" alt="Trend indicator" />
              </div> -->
            </div>
            <div class="response-time-text">
              avg.response time {{ platform.avgResponseTime }} days
            </div>
            <div class="platform-stats-summary">
              <div class="unanswered-reviews">
                Unreplied:
                <span style="color: #000">{{ platform.unreplied }}</span>
              </div>
              <div class="flagged-reviews">
                Flagged: <span style="color: #000">{{ platform.flagged }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- <div
          class="platform-close-icon"
          v-show="isPlatformSelected(platform.platform)"
          @click.stop="removePlatform(platform.platform)"
        >
          ×
        </div> -->
      </div>
      <!-- <div class="platform-rating-card">
        <PlatformCou></PlatformCou>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import PlatformCou from "./PlatformCou.vue";

export default {
  components: { PlatformCou },
  data() {
    return {
      // 保留本地状态用于初始化
      localSelectedPlatforms: [],
    };
  },
  computed: {
    ...mapState("dashBoard", ["ratingInfos"]),
    ...mapState("reviewReply", ["selectedPlatforms"]),

    ratingPlatforms() {
      // 过滤掉可能的空值或无效数据
      return (this.ratingInfos || []).filter(
        (platform) =>
          platform && platform.platform && platform.score !== undefined
      );
    },
    // 添加一个计算属性用于获取有效的平台列表
    validPlatforms() {
      return this.ratingPlatforms.map((p) => p.platform);
    },
  },
  created() {
    // 初始化时从Vuex获取或设置默认值
    if (this.selectedPlatforms.length === 0) {
      const allPlatforms = this.ratingPlatforms.map((p) => p.platform);
      this.updateSelectedPlatforms(allPlatforms);
    }
    this.initializePlatforms();
  },
  methods: {
    ...mapActions("reviewReply", ["updateSelectedPlatforms"]),

    // 检查平台是否选中
    isPlatformSelected(platformName) {
      return this.selectedPlatforms.includes(platformName);
    },
    initializePlatforms() {
      // 如果Vuex中没有有效的平台选择，使用所有可用平台
      if (
        !this.selectedPlatforms ||
        this.selectedPlatforms.filter((p) => p).length === 0
      ) {
        const allValidPlatforms = this.validPlatforms;
        if (allValidPlatforms.length > 0) {
          this.updateSelectedPlatforms(allValidPlatforms);
        }
      } else {
        // 过滤掉selectedPlatforms中的null值
        const validSelected = this.selectedPlatforms.filter((p) => p);
        if (validSelected.length !== this.selectedPlatforms.length) {
          this.updateSelectedPlatforms(validSelected);
        }
      }
    },

    // 组件中的togglePlatform方法
    togglePlatform(platformName) {
      if (!platformName) return;
      if (this.isPlatformSelected(platformName)) {
        const updated = this.selectedPlatforms.filter(
          (name) => name !== platformName
        );
        this.updateSelectedPlatforms(updated);
      } else {
        const updated = [...this.selectedPlatforms, platformName];
        this.updateSelectedPlatforms(updated);
      }
      // 发射平台变化事件
      this.$emit("platforms-change", this.selectedPlatforms);
    },

    // 添加平台
    addPlatform(platformName) {
      const updatedPlatforms = [...this.selectedPlatforms, platformName];
      this.updateSelectedPlatforms(updatedPlatforms);
      console.log("当前选中的平台:", this.selectedPlatforms);
    },

    // 移除平台
    removePlatform(platformName) {
      if (this.selectedPlatforms.length === 1) {
        this.$message.warning("At least one platform needs to be selected");
        console.log("当前选中的平台:", this.selectedPlatforms);
        return;
      }
      const updatedPlatforms = this.selectedPlatforms.filter(
        (name) => name !== platformName
      );
      this.updateSelectedPlatforms(updatedPlatforms);
    },

    // 以下方法保持不变
    formatNumber(num) {
      return num?.toLocaleString() || "0";
    },

    getPlatformLogo(platformName) {
      const lowerCaseName = platformName.toLowerCase(); // 统一转为小写
      try {
        return require(`@/assets/platforms/${lowerCaseName}.png`);
      } catch {
        return require("@/assets/platforms/default.png");
      }
    },
  },
  mounted() {
    console.log(
      "reply页面当前选中的平台:",
      this.selectedPlatforms.filter((p) => p)
    );
    //传递平台给父组件
    // this.togglePlatform();
  },
};
</script>

<style lang="scss" scoped>
/* 保持所有原有样式完全不变 */
.platform-rating-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 40px;
}

.platform-rating-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.platform-rating-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc((100% - 80px) / 3);
  height: auto;
  background: #fff;
  border: 1px solid #cdcccc;
  border-radius: 16px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;

  &.platform-selected {
    border: 2px solid #1d6eb1;
    // background-color: #ccdff1;
  }
}

.platform-close-icon {
  position: absolute;
  top: -4%;
  right: -2%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6a6969;
  color: #fff;
  cursor: pointer;
  z-index: 222;
}

.platform-card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  height: 100%;
  border-radius: 16px;
}

.platform-card-header {
  padding: 16.5px 0 16.5px 24px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  border: none !important;
  background: #d2ebff;
  box-sizing: border-box;
}

.platform-logo-wrapper {
  width: 0.3472rem;
  height: 0.3472rem;
  margin-right: 10px;

  img {
    width: 0.3472rem;
    height: 0.3472rem;
  }
}

.platform-info-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  text-align: start;

  .platform-name-text {
    font-size: 0.125rem;
    font-weight: 600;
    color: #232323;
  }

  .platform-rating-wrapper {
    .platform-rating-value {
      font-size: 0.1111rem;
      font-weight: 600;
      color: #232323;
    }

    .platform-review-count {
      font-size: 0.0972rem;
      font-weight: 600;
      color: #454545;
    }

    .rating-star-icon {
      color: #efb82c;
    }
  }
}

.platform-stats-container {
  flex: 1;
  padding: 8px 24px 16px 24px;
}

.response-rate-wrapper {
  display: flex;
  font-size: 0.0972rem;
  margin-bottom: 0.0556rem;

  .response-rate-label {
    font-size: 0.1111rem;
    font-weight: 400;
    color: #454545;
    margin-right: 0.0556rem;
  }

  .response-rate-value {
    font-size: 0.1111rem;
    font-weight: 600;
    color: #454545;
    margin-right: 0.0556rem;
  }
  .response-rate-trend {
    width: 0.1875rem;
    height: 0.0903rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.response-time-text {
  font-size: 0.0833rem;
  margin-bottom: 0.1111rem;
  font-weight: 400;
  color: #454545;
}

.platform-stats-summary {
  font-size: 0.0764rem;

  .unanswered-reviews {
    margin-bottom: 0.0556rem;
    font-size: 0.0833rem;
    font-weight: 400;
    color: #efb82c;
  }

  .flagged-reviews {
    font-size: 0.0833rem;
    font-weight: 400;
    color: #ce4049;
  }
}
</style>
